<template>
	<div>
		<Header />
		<div>
			<div class="bannerWrapper">
			    <div class="topTitle">
			        学习园地
			    </div>
			    <div class="mapNav">
			        <div class="indexContainer">
			            <el-breadcrumb separator-class="el-icon-arrow-right">
			                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			                <el-breadcrumb-item :to="{ path: '/studyGarden' }">学习园地</el-breadcrumb-item>
							<el-breadcrumb-item>{{menuTitle}}</el-breadcrumb-item>
			            </el-breadcrumb>
			        </div>
			
			    </div>
			</div>
			
			<div style="display: none;" class="mobilePadding mobileBlock">
				<el-tabs v-model="menuTitle" @tab-click="tabsClick">
					<template
						v-for="item in menuListData">
						<el-tab-pane :name="item.code" :label="item.name"></el-tab-pane>
					</template>
				</el-tabs>
			</div>

			<div class="indexContainer mobilePadding" style="padding: 10px 0;">
				<el-row>
					<el-col :xs="24" :sm="24" :md="4" :lg="4" :xl="4">
						<div>
							<div class="mobileNone">
								<ul>
									<li v-for="(item, index) in menuListData"
										style="border-bottom: 1px dashed #ccc;cursor: pointer;padding: 20px 0;display: flex;justify-content: space-between;align-items: center;font-size:18px;cursor: pointer;"
										:class="[menuTitle==item.name?'themeGradientColor':'']" @click="handleMenu(item.name)">
										<span
											:style="{color: menuTitle==item.name ? '#fff' : '#666','margin-left': '10px'}">{{ item.name }}</span>

										<i :style="{'color':menuTitle==item.name?'#fff':'#666','margin-right':'10px'}"
											class="el-icon-arrow-right"></i>
									</li>
								</ul>
							</div>
						</div>
					</el-col>

					<el-col :xs="24" :sm="24" :md="20" :lg="20" :xl="20">
						<el-row>
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
								<div style="margin-left:35px;border-bottom: 1px dashed #266af2;display: flex;">
									<div style="background-color: #266af2;color: #fff;font-size: 16px;padding: 10px 20px;">{{menuTitle}}</div>
								</div>
								<ul v-loading="loading" :style="{'margin-top':loading==true?'100px':'0px','padding-left':'20px'}">
									<li v-for="(item, index) in listData"
										style="margin-top: 30px;padding-bottom: 20px;margin-left:15px;border-bottom: 1px dashed #ccc;display: flex;align-items: center;justify-content: space-between;cursor: pointer;"
										@click="todetail(item.id)">
										<span>• <span style="color: #666;font-size: 16px;">{{item.title}}</span></span>
										<span style="color: #666;font-size: 16px;">{{updateTimeChange(item.updateTime)}}</span>
									</li>
						
									<el-empty v-if="listData.length==0 && loading==false"
										description="暂无内容"></el-empty>
								</ul>
							</el-col>
							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
								<div style="text-align: center; margin-top: 40px">
									<el-pagination v-if="listData.length!=0" background
										layout="prev, pager, next" :total="total" :page-size="5"
										:pager-count="5" @current-change="handleCurrentChange">
									</el-pagination>
								</div>
							</el-col>
						</el-row>
					</el-col>
				</el-row>
			</div>
		</div>

		<Footer />
	</div>
</template>
<script>
	import Header from "@/components/home/header/header";
	import Footer from "@/components/home/footer/footer";
	import {
		getQueryDictByCode,
		getStudyList
	} from "@/request/api/xxyd";
	export default {
		components: {
			Header,
			Footer,
		},
		data() {
			return {
				menuTitle: ' ',
				menuListData:[],
				loading: false,
				page: 1,
				total: 0,
				listData: []
			};
		},
		created() {
			this.getQueryDictByCode()
		},
		mounted() {
			// console.log("mounted");
		},
		methods: {
			// 格式化时间
			updateTimeChange(val){
				return this.$moment(val).format('YYYY-MM-DD')
			},
			// 根据字典值获取左侧列表
			getQueryDictByCode(){
				getQueryDictByCode({code:'xxyd'}).then((res) => {
					// console.log('res',res)
					this.loading = false
					if (res.data.code == 1) {
						this.menuListData = res.data.data.childList
						if(this.menuListData.length){
							this.menuTitle = this.menuListData[0].name
							this.getList()
						}
					} else {
						this.$message({
							message: res.data.message,
							type: "warning",
						});
					}
				}).catch((err) => {
					this.loading = false
					console.log('err', err)
				})
			},
			// 手机标签
			tabsClick(tab) {
				this.page = 1
				this.menuTitle = tab.name
				this.getList()
			},
			// 点击分页
			handleCurrentChange(val) {
				this.page = val
				this.getList()
			},
			// 点击菜单
			handleMenu(name) {
				this.menuTitle = name
				this.page = 1
				this.getList()
			},
			// 获取列表
			getList() {
				this.listData = []
				this.loading = true
				let code = ''
				this.menuListData.map((item)=>{
					if(item.name == this.menuTitle){
						code = item.code
					}
				})
				let params = {
					classify: code,
					current: this.page,
					pageSize: 10
				}
				getStudyList(params).then((res) => {
					// console.log('res',res)
					this.loading = false
					if (res.data.code == 1) {
						this.listData = res.data.data.totalList
						this.total = res.data.data.total
					} else {
						this.$message({
							message: res.data.message,
							type: "warning",
						});
					}
				}).catch((err) => {
					this.loading = false
					console.log('err', err)
				})
			},
			todetail(id) {
				this.$router.push({
					name: "studyGardenDetail",
					// name: "informationDetail",
					query: {
						id
					},
				});
			},
		},
	};
</script>
<style lang="less" scoped>
	/* 适用于手机的样式 */
	@media (max-width: 767px) {
		.mobilePadding {
			padding: 0 10px !important;
		}

		.mobileNone {
			display: none;
		}

		.mobileBlock {
			display: block !important;
		}

		.mobileFontSize14 {
			font-size: 14px !important;
		}

		.mobileFontSize12 {
			font-size: 12px !important;
		}
	}

	/deep/.el-pagination.is-background .btn-prev {
		background-color: #fff;
		border: 1px solid #ccc;
	}

	/deep/.el-pagination.is-background .el-pager li {
		background-color: #fff;
		border: 1px solid #ccc;
	}

	/deep/.el-pagination.is-background .btn-next {
		background-color: #fff;
		border: 1px solid #ccc;
	}

	/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
		background: linear-gradient(to bottom right, #266af2, #76a0f5);
	}
	.bannerWrapper{
	    position: relative;
	}
	.mapNav{
	   margin:20px 0;
	}
	.topTitle{
	    color:#fff;
	    height:100px;
	    font-size:30px;
	    line-height: 100px;
	    font-weight:800;
	    text-align: center;
	    background: url('~@/assets/images/cs4.png');
	}
</style>